<!-- 考勤-基础设置-考勤项目设置 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <main>
        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>考勤项设置</h2>
              </header>
            </template>
            <a-table
              :columns="tableData.attendanceSetting.columns"
              :data="tableData.attendanceSetting.data"
              stripe
              :pagination="false"
            >
              <template #enable="{ record }">
                <a-switch
                  :checkedValue="1"
                  :uncheckedValue="2"
                  v-model="record.enable"
                  size="medium"
                />
              </template>
              <template #unit="{ record }">
                <a-checkbox-group v-model="record.unit">
                  <a-checkbox :value="1">小时</a-checkbox>
                  <a-checkbox :value="2">天</a-checkbox>
                </a-checkbox-group>
              </template>
            </a-table>
          </a-collapse-item>
        </a-collapse>

        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>迟到、早退、旷工</h2>
              </header>
            </template>
            <a-table
              :columns="tableData.mistakeSetting.columns"
              :data="tableData.mistakeSetting.data"
              stripe
              :pagination="false"
            >
              <template #enable="{ record }">
                <a-switch
                  :checkedValue="1"
                  :uncheckedValue="2"
                  v-model="record.enable"
                  size="medium"
                />
              </template>
              <template #unit="{ record }">
                <a-checkbox-group v-model="record.unit">
                  <a-checkbox :value="1">小时</a-checkbox>
                  <a-checkbox :value="2">天</a-checkbox>
                </a-checkbox-group>
              </template>
            </a-table>
          </a-collapse-item>
        </a-collapse>

        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>加班</h2>
              </header>
            </template>
            <a-table
              :columns="tableData.otSetting.columns"
              :data="tableData.otSetting.data"
              stripe
              :pagination="false"
            >
              <template #name="{ record }">
                {{ record.name }}
                <a-tooltip
                  content="超时加班仅用于展示综合工时制下，
员工超出月标准时长的工时"
                  v-if="record.name === '超时加班'"
                >
                  <icon-info-circle-fill style="color: #165dff" :size="20" />
                </a-tooltip>
              </template>
              <template #enable="{ record }">
                <a-switch
                  :checkedValue="1"
                  :uncheckedValue="2"
                  v-model="record.enable"
                  size="medium"
                />
              </template>
              <template #unit> 小时 </template>
            </a-table>
          </a-collapse-item>
        </a-collapse>

        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>请假与调休</h2>
              </header>
            </template>
            <div class="holiday">
              <div>
                <div style="font-weight: 700">
                  请在【假期管理】中设置假期类型。
                  <a-button type="text">去设置></a-button>
                </div>
                <div>假期管理的假期类型、假期规则将用于考勤、审批等。</div>
              </div>
            </div>
          </a-collapse-item>
        </a-collapse>

        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>外勤</h2>
              </header>
            </template>
            <a-table
              :columns="tableData.outsideSetting.columns"
              :data="tableData.outsideSetting.data"
              stripe
              :pagination="false"
            >
              <template #enable="{ record }">
                <a-switch
                  :checkedValue="1"
                  :uncheckedValue="2"
                  v-model="record.enable"
                  size="medium"
                />
              </template>
              <template #unit="{ record }">
                {{ record.name === '外出' ? '小时' : '天' }}
              </template>
            </a-table>
          </a-collapse-item>
        </a-collapse>

        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>考勤补贴</h2>
              </header>
            </template>
            <a-table
              :columns="tableData.allowanceSetting.columns"
              :data="tableData.allowanceSetting.data"
              stripe
              :pagination="false"
            >
              <template #enable="{ record }">
                <a-switch
                  :checkedValue="1"
                  :uncheckedValue="2"
                  v-model="record.enable"
                  size="medium"
                />
              </template>
              <template #unit> 元 </template>
            </a-table>
          </a-collapse-item>
        </a-collapse>
      </main>

      <footer>
        <a-button
          class="btn"
          style="
            margin-right: 20px;
            border: 1px rgba(242, 242, 242, 1) solid;
            background-color: #fff;
          "
          @click="$router.go(-1)"
          >返回</a-button
        >
        <a-button class="btn" type="primary" @click="save">保存</a-button>
      </footer>
    </div>
  </ContentCard>
</template>

<script lang="ts" setup>
const title = '考勤项目设置';

const breadCrumb: string[] = ['考勤', '基础设置', '考勤设置', '考勤项目设置'];

const tableData = reactive({
  // 考勤项目设置
  attendanceSetting: {
    columns: [
      {
        title: '合计项',
        width: 400,
        dataIndex: 'name'
      },
      {
        title: '是否启用',
        width: 200,
        dataIndex: 'enable',
        slotName: 'enable'
      },
      {
        title: '单位',
        dataIndex: 'unit',
        slotName: 'unit'
      }
    ],
    data: [
      {
        name: '应出勤时长',
        enable: 1,
        unit: [1]
      },
      {
        name: '实际出勤时长',
        enable: 1,
        unit: [1, 2]
      }
    ]
  },
  // 迟到、早退旷工
  mistakeSetting: {
    columns: [
      {
        title: '考勤项',
        width: 400,
        dataIndex: 'name'
      },
      {
        title: '是否启用',
        width: 200,
        dataIndex: 'enable',
        slotName: 'enable'
      },
      {
        title: '单位',
        dataIndex: 'unit',
        slotName: 'unit'
      }
    ],
    data: [
      {
        name: '迟到',
        enable: 1,
        unit: []
      },
      {
        name: '早退',
        enable: 1,
        unit: []
      },
      {
        name: '累计迟到早退',
        enable: 1,
        unit: []
      },
      {
        name: '补卡',
        enable: 1,
        unit: []
      },
      {
        name: '旷工',
        enable: 1,
        unit: []
      },
      {
        name: '上班缺卡',
        enable: 1,
        unit: []
      }
    ]
  },
  // 加班
  otSetting: {
    columns: [
      {
        title: '加班项',
        dataIndex: 'name',
        width: 400,
        slotName: 'name'
      },
      {
        title: '是否启用',
        width: 200,
        dataIndex: 'enable',
        slotName: 'enable'
      },
      {
        title: '单位',
        dataIndex: 'unit',
        slotName: 'unit'
      }
    ],
    data: [
      {
        name: '工作日加班',
        enable: 1
      },
      {
        name: '休息日加班',
        enable: 1
      },
      {
        name: '节假日加班',
        enable: 1
      },
      {
        name: '超时加班',
        enable: 1
      }
    ]
  },

  // 外勤
  outsideSetting: {
    columns: [
      {
        title: '外勤项',
        width: 400,
        dataIndex: 'name'
      },
      {
        title: '是否启用',
        width: 200,
        dataIndex: 'enable',
        slotName: 'enable'
      },
      {
        title: '单位',
        dataIndex: 'unit',
        slotName: 'unit'
      }
    ],
    data: [
      {
        name: '外出',
        enable: 1
      },
      {
        name: '出差',
        enable: 1
      }
    ]
  },

  // 考勤补贴
  allowanceSetting: {
    columns: [
      {
        title: '考勤补贴项',
        dataIndex: 'name',
        width: 400,
        slotName: 'name'
      },
      {
        title: '是否启用',
        width: 200,
        dataIndex: 'enable',
        slotName: 'enable'
      },
      {
        title: '单位',
        dataIndex: 'unit',
        slotName: 'unit'
      }
    ],
    data: [
      {
        name: '晚下班补贴',
        enable: 1
      },
      {
        name: '班次补贴',
        enable: 1
      },
      {
        name: '外出补贴',
        enable: 1
      },
      {
        name: '出差补贴',
        enable: 1
      },
      {
        name: '外勤打卡补贴',
        enable: 1
      }
    ]
  }
});

const save = () => {
  //
};
</script>

<style lang="less" scoped>
.wrap {
  main {
    margin-bottom: 60px;
    overflow: hidden;
    header h2 {
      display: flex;
      align-items: center;
    }
    header h2::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 30px;
      background-color: #165dff;
      margin-right: 10px;
    }
  }

  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      min-width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }

  .holiday {
    width: 100%;
    height: 170px;
    border: 1px dashed rgba(228, 228, 228, 1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

:deep(.arco-table-th),
:deep(.arco-table-td) {
  height: 60px;
}
:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
</style>
